// 发薪记录
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, Prop } from 'vue-facing-decorator'
import {
    type VxeTableDataRow
} from 'vxe-table'
import toNative from '@/utils/toNative'

import type { FilterDto } from '@/render/FilterRender'
import { getPayRecordList } from '@/api/company'
import { getKeyToEnum, PayAccountFlagCnEnum, PayStateCnEnum } from '@/const/enum'

@Component
export class PaywageRecord extends TableRender {
    @Prop() companyId!: number

    date = []

    filterConfig() {
        return {
            projectName: {
                name: '项目名称',
                element: 'input',
            },
            payAccountFlag: {
                name: '发薪方式',
                element: 'select',
                options: getKeyToEnum(PayAccountFlagCnEnum, true)
            },
            queryMonth: {
                name: '发薪时间',
                element: 'rangePicker',
                defaultValue: [],
            },
        } as FilterDto
    }

    // tableConfig() {
    //     const config = super.tableConfig()
    //     return {
    //         ...config,
    //         align: 'center',
    //         border: 'inner',
    //         height: 'auto',
    //         rowConfig: {
    //             height: 90
    //         }
    //     } as VxeGridProps
    // }

    tableColumnConfigOld = () => [
        {
            field: 'projectName',
            title: '项目名称'
        },
        {
            field: 'serveCompanyName',
            title: '被派遣单位'
        },
        {
            field: 'state',
            title: '发薪状态',
            params: {
                colors: {
                    0: 'blue-200',
                    1: 'green',
                    2: 'red',
                    3: 'gray-light-100',
                },
            },
            formatter: ({row}) => {
                return PayStateCnEnum[row.state]
            },
            slots: {
                default: 'status'
            }
        },
        {
            field: 'peopleNum',
            title: '发薪人数',
        },
        {
            field: 'totalMoney',
            title: '发薪金额',
            formatter: ({row}) => {
                return `¥${row.totalMoney ?? 0}`
            }
        },
        {
            field: 'payStopTotalMoney',
            title: '停发金额',
            formatter: ({row}) => {
                return `¥${row.payStopTotalMoney ?? 0}`
            }
        },
        {
            field: 'payAccountFlag',
            title: '支付方式',
            formatter: ({row}) => {
                return PayAccountFlagCnEnum[row.payAccountFlag]
            }
        },
        {
            field: 'approvalTime',
            title: '发薪时间',
            width: 180,
        },

    ] as TableRenderColumnTypes<VxeTableDataRow>

    onLoadData(page: number, size: number, filters: AnyObject) {
        filters.beginPayTime = filters.queryMonth?.[0] ?? ''
        filters.endPayTime = filters.queryMonth?.[1] ?? ''
        delete filters.queryMonth
        return getPayRecordList({
            companyId: this.companyId,
            pageNum: page,
            pageSize: size,
            ...filters,
        })
    }

    renderRightBtns() {
        return <></>
    }

    renderStatistics() {
        return <div></div>
    }

    render() {
        return <>
            {super.render()}
        </>
    }
}

export default toNative<{companyId: number}, {}>(PaywageRecord)
